<template>
    <el-tabs
        :style="{
            width: obj.width+'%',
            padding: obj.padding+'px'
        }"
        :tab-position="obj.tabPosition"
        v-model="obj.curTab"
        type="border-card">
        <el-tab-pane
            :style="{ height: obj.height?obj.height+'px': 'auto'}"
            v-for="(column, key, columnIndex) in obj.childList"
            :key="columnIndex"
            :label="(obj.tabList[columnIndex]).label"
            :name="(obj.tabList[columnIndex]).value">
            <el-form label-width="60px">
                <draggable class="child-drag-box" tag="li" id="baseTab" @change="changeList" :list="column" @add="addEnd" v-bind="{group:{ name:'base' }, dragClass: 'dragClass'}">
                    <div v-for="(child, childIndex) in column" :key="childIndex" class="child-component">
                        <span class="row-remove label" @click="delComponent(key,childIndex)"><i class="iconfont icon-shanchu"/> 删除</span>
                        <span class="row-edit label" @click="setComponent(key, childIndex)"><i class="iconfont icon-editor"/> 编辑</span>
                        <base-button :obj="child" v-if="child.type=='BaseButton'"/>
                        <base-img :obj="child" v-if="child.type=='BaseImg'"/>
                        <base-title :obj="child" v-if="child.type=='BaseTitle'"/>
                        <base-p :obj="child" v-if="child.type=='BaseP'"/>
                        <base-slider :obj="child" v-if="child.type=='BaseSlider'"/>
                        <form-id :obj="child" v-if="child.type=='FormId'"/>
                        <form-input :obj="child" v-if="child.type=='FormInput'"/>
                        <form-textarea :obj="child" v-if="child.type=='FormTextarea'"/>
                        <form-radio :obj="child" v-if="child.type=='FormRadio'"/>
                        <form-select :obj="child" v-if="child.type=='FormSelect'"/>
                        <form-checkbox :obj="child" v-if="child.type=='FormCheckbox'"/>
                        <title :obj="child" v-if="child.type=='Title'"/>
                        <form-checkbox :obj="child" v-if="child.type=='FormCheckbox'"/>
                        <banner :obj="child" v-if="child.type=='Banner'"/>
                        <compony-team :obj="child" v-if="child.type=='ComponyTeam'"/>
                        <cover-img :obj="child" v-if="child.type=='CoverImg'"/>
                        <icon-box :obj="child" v-if="child.type=='IconBox'"/>
                        <icon-columns :obj="child" v-if="child.type=='IconColumns'"/>
                        <nav-bar :obj="child" v-if="child.type=='NavBar'"/>
                        <seam-img-scroll :obj="child" v-if="child.type=='SeamImgScroll'"/>
                        <seam-text-scroll :obj="child" v-if="child.type=='SeamTextScroll'"/>
                        <steps :obj="child" v-if="child.type=='Steps'"/>
                        <swiper :obj="child" v-if="child.type=='Swiper'"/>
                        <text-bottom-img :obj="child" v-if="child.type=='TextBottomImg'"/>
                        <text-top-img :obj="child" v-if="child.type=='TextTopImg'"/>
                        <text-left-img :obj="child" v-if="child.type=='TextLeftImg'"/>
                        <text-right-img :obj="child" v-if="child.type=='TextRightImg'"/>
                        <three-columns :obj="child" v-if="child.type=='ThreeColumns'"/>
                        <three-columns2 :obj="child" v-if="child.type=='ThreeColumns2'"/>
                        <three-columns3 :obj="child" v-if="child.type=='ThreeColumns3'"/>
                        <two-columns :obj="child" v-if="child.type=='TwoColumns'"/>
                        <time-line :obj="child" v-if="child.type=='TimeLine'"/>

                    </div>
                </draggable>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import draggable from 'vuedraggable'

import deepClone from '@/utils/deepClone'
export default {
    name: 'BaseTab',
    components: {
        draggable
    },
    props: {
        obj: {
            type: Object
        }
    },

    data() {
        return {

        }
    },
    methods: {

        changeList() {

        },
        // 删除组件
        delComponent(key, childIndex) {
            this.obj.childList[key].splice(childIndex, 1)
            this.dispatch()
        },
        // 组件设置
        setComponent(key, childIndex) {
            this.$emit('tabset', this.obj.childList[key][childIndex])
        },
        // 保存数据到vuex
        dispatch() {
            this.$store.dispatch('set_template_list')
        },
        addEnd(item) {
            if (item.oldIndex == 4 && item.to.id == 'baseTab') {
                alert('Tab组件内不能拖入Tab组件')
                return
            }
        }
    }
}
</script>
